<%--
  Created by IntelliJ IDEA.
  User: ZTK
  Date: 2025/6/14
  Time: 00:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>二手平台 - 商品详情</title>
  <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap-icons.css">
  <style>
    :root {
      --primary-color: #ff5000;
    }

    body {
      background-color: #f5f5f5;
      padding-top: 56px;
      padding-bottom: 70px;
    }

    .navbar {
      background-color: var(--primary-color);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .navbar-brand {
      font-weight: bold;
      color: white !important;
    }

    .product-images {
      background-color: white;
    }

    .carousel-item img {
      height: 350px;
      object-fit: contain;
    }

    .product-info {
      background-color: white;
      padding: 20px;
      margin-top: 10px;
      border-radius: 8px;
    }

    .product-price {
      color: var(--primary-color);
      font-size: 1.8rem;
      font-weight: bold;
    }

    .product-title {
      font-size: 1.2rem;
      font-weight: bold;
      margin-top: 10px;
    }

    .product-meta {
      color: #888;
      font-size: 0.9rem;
      margin-top: 5px;
    }

    .seller-info {
      background-color: white;
      padding: 15px;
      margin-top: 10px;
      border-radius: 8px;
      display: flex;
      align-items: center;
    }

    .seller-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 15px;
    }

    .product-detail {
      background-color: white;
      padding: 20px;
      margin-top: 10px;
      border-radius: 8px;
    }

    .detail-title {
      font-weight: bold;
      font-size: 1.1rem;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }

    .action-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      padding: 10px;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .action-btn {
      flex: 1;
      text-align: center;
      padding: 10px;
      border-radius: 5px;
      margin: 0 5px;
      cursor: pointer;
    }

    .action-btn.chat {
      background-color: #f5f5f5;
    }

    .action-btn.collect {
      background-color: #f5f5f5;
    }

    .action-btn.cart {
      background-color: #ffd600;
      color: #333;
    }

    .action-btn.buy {
      background-color: var(--primary-color);
      color: white;
    }

    .carousel-indicators button {
      background-color: #ccc;
    }

    .carousel-indicators .active {
      background-color: var(--primary-color);
    }

    .action-message {
      position: fixed;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1050;
      padding: 10px 20px;
      border-radius: 5px;
      background-color: #4CAF50;
      color: white;
      font-weight: bold;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      display: none;
    }

    .action-message.error {
      background-color: #f44336;
    }

    .navbar{
      background-color: #ff5000;
    }
    .navbar-brand{
      font-size: 20px;
      color: white !important;
      font-weight: bold;
    }

    .bi,.bi-cart,.small {
      color: #212529 !important;
    }

    #deLine{
      text-underline: none !important;
    }

  </style>
</head>
<body>
<div class="action-message" id="actionMessage"></div>

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg fixed-top">
  <div class="container">
    <a class="navbar-brand" href="${pageContext.request.contextPath}/product/list">二手平台</a>
    <div class="d-flex flex-grow-1 justify-content-end">
      <ul class="navbar-nav">
        <c:choose>
          <c:when test="${not empty sessionScope.currentUser}">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                  ${sessionScope.currentUser.username}
              </a>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/order/list">我的订单</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/logout">退出登录</a></li>
              </ul>
            </li>
          </c:when>
          <c:otherwise>
            <li class="nav-item">
              <a class="nav-link" href="${pageContext.request.contextPath}/user/login">登录</a>
            </li>
          </c:otherwise>
        </c:choose>
      </ul>
    </div>
  </div>
</nav>

<!-- 商品图片轮播 -->
<div class="product-images">
  <div id="productCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="0" class="active"></button>
      <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="${product.imagePath}" class="d-block w-100" alt="商品图片">
      </div>
      <div class="carousel-item">
        <img src="${product.imagePath}" class="d-block w-100" alt="商品图片">
      </div>
      <div class="carousel-item">
        <img src="${product.imagePath}" class="d-block w-100" alt="商品图片">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
    </button>
  </div>
</div>

<!-- 商品信息 -->
<div class="container">
  <div class="product-info">
    <div class="product-price">¥${product.price}</div>
    <div class="product-title">${product.name}</div>
    <div class="product-meta">
      <span>${product.category}</span>
      <span class="float-end">${product.createdTime}</span>
    </div>
  </div>

  <!-- 卖家信息 -->
  <div class="seller-info">
    <img src="${pageContext.request.contextPath}/resources/image/maiJia.png" class="seller-avatar" alt="卖家头像">
    <div>
      <div class="fw-bold">卖家昵称</div>
      <div class="text-muted small">信用极好 · 在线</div>
    </div>
  </div>

  <!-- 商品详情 -->
  <div class="product-detail">
    <div class="detail-title">商品详情</div>
    <div>
      ${product.description}
    </div>
  </div>
</div>

<!-- 底部操作栏 -->
<div class="action-bar">
  <div class="action-btn chat">
    <i class="bi bi-chat"></i>
    <div class="small">联系</div>
  </div>
  <div class="action-btn collect">
    <i class="bi bi-heart"></i>
    <div class="small">收藏</div>
  </div>

  <!-- 加入购物车表单 -->
  <div class="action-btn cart" id="addToCartBtn">
    <a href="javascript:void(0);">
      <i class="bi bi-cart"></i>
      <div class="small" id="deLine">加入购物车</div>
    </a>
  </div>

  <div class="action-btn buy">
    <i class="bi bi-bag"></i>
    <div class="small">立即购买</div>
  </div>
</div>

<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.6.0.min.js"></script>
<script>

  function showMessage(message, isError = false) {
    const messageDiv = document.getElementById('actionMessage');
    messageDiv.textContent = message;
    messageDiv.className = isError ? 'action-message error' : 'action-message';
    messageDiv.style.display = 'block';

    setTimeout(() => {
      messageDiv.style.display = 'none';
    }, 3000);
  }

  $(document).ready(function() {
    $('#addToCartBtn').click(function() {

      const isLoggedIn = ${not empty sessionScope.currentUser};

      if (!isLoggedIn) {
        showMessage('请先登录再操作', true);
        setTimeout(() => {
          window.location.href = '${pageContext.request.contextPath}/user/login';
        }, 1500);
        return;
      }

      $.ajax({
        type: "POST",
        url: "${pageContext.request.contextPath}/cart/add",
        contentType: "application/json",
        data: JSON.stringify({
          productId: ${product.id},
          quantity: 1
        }),
        success: function(response) {
          if (response.success) {
            showMessage('商品已成功加入购物车！');

            updateCartCount(response.cartCount);
          } else {
            showMessage(response.message || '操作失败，请重试', true);
          }
        },
        error: function(xhr) {
          showMessage('网络错误: ' + xhr.status + ' ' + xhr.statusText, true);
        }
      });
    });
  });

  function updateCartCount(count) {
    const cartCountElement = document.getElementById('cartCount');
    if (cartCountElement) {
      cartCountElement.textContent = count > 0 ? count : '';
    }
  }
</script>
</body>
</html>